<%--
  Created by IntelliJ IDEA.
  User: Luke
  Date: 2022/12/24
  Time: 14:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录注册</title>
    <link rel="stylesheet" href="css/style.css">
<%--    <link rel="stylesheet" href="css/iconfont/iconfont.css">--%>

<%--    <script src="js/jquery-3.5.1.js"></script>--%>
<%--    <script src="js/bootstrap.js"></script>--%>

</head>
<body>
<div class="container" id="container">
    <%--        注册卡片--%>

    <div class="form-container sign-up-container">
        <form action="AuthServlet?action=register" method="post"
              onsubmit="return check1()" >
            <div class="loginLabel"><label style="text-align: center;font-size: 25px;padding-top:25px;font-weight: 500;color:#000000;text-shadow: 2px 3px #FFFFFF;">银行账户管理系统</label></div>
            <br>
            <h1>用户注册</h1>
            <input type="text" id="username" name="username" placeholder="请输入账号">
            <input type="password" id="password" name="password" placeholder="请输入密码">
            <input type="password" id="password2" name="password2" placeholder="请确定密码">
            <button>注册</button>
        </form>
    </div>
    <%--        登录卡片--%>
    <div class="form-container sign-in-container">
        <form action="AuthServlet?action=login" method="post"
              onsubmit="return check2()" >
            <div class="loginLabel"><label style="text-align: center;font-size: 25px;padding-top:25px;font-weight: 500;color:#000000;text-shadow: 2px 3px #FFFFFF;">银行账户管理系统</label></div>
            <br>
            <h1>用户登录</h1>
            <input type="text" id="username3" name="username3" placeholder="请输入用户名">
            <input type="password" id="password3" name="password3" placeholder="请输入密码">
            <input type="text" id="validationCode" name="validationCode" placeholder="验证码">
            <img id="img_validation_code" src="AuthServlet?action=validationCode" onclick="refresh()" style="height: 30px;width: 135px;"/>
            <button>登录</button>
        </form>
    </div>
    <%--     侧边栏内容 --%>
    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-pannel overlay-left">
                <h1>已有账号?</h1>
                <p>那就快点击登录吧</p>
                <button class="ghost" id="signIn">登录</button>
            </div>
            <div class="overlay-pannel overlay-right">
                <h1>没有账号?</h1>
                <p>那就快点击注册吧</p>
                <button class="ghost" id="signUp">注册</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/index.js"></script>
<script type="text/javascript">
    function check1() {
        //根据ID获取值
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var password2 = document.getElementById("password2").value;
        if (username == "") {
            alert("用户名不能为空!");
            return false;
        }
        if (password == "") {
            alert("密码不能为空!");
            return false;
        }
        if (password2 != password) {
            alert("密码输入不一致!");
            return false;
        }
        return true;
    }

    function check2() {
        //根据ID获取值
        var username3 = document.getElementById("username3").value;
        var password3 = document.getElementById("password3").value;
        if (username3 == "") {
            alert("用户名不能为空!");
            return false;
        }
        if (password3 == "") {
            alert("密码不能为空!");
            return false;
        }
        return true;
    }
    function refresh() {
        let img = document.getElementById("img_validation_code")
        img.src = "AuthServlet?action=validationCode&r=" + Math.random();
    }
</script>
</html>
